<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			title="单店月销售" @clickLeft="back" />
			

		<uni-forms :modelValue="baseFormData" ref="form" style="margin-left: 10px;" :rules="rules">
			
			<uni-forms-item label="连锁店:" style="margin-top: 15px; width: 70%;" name="chainStore">
					<uni-combox style="width: 95%;  margin-left: -10px;"  :candidates="candidates" placeholder="所有连锁店" v-model="chain"  @input="getHandle(chain)"></uni-combox>
			</uni-forms-item>
			<button type="warn" size="mini" @click="clearInput" style="position: relative; left: 80%; top: -55px">清空</button>
			<uni-forms-item label="年份:" style="margin-top: -45px;" name="year">
				<uni-data-select style="width: 40%;  margin-left: -25px; " v-model="baseFormData.year"
					placeholder="请选择年份" :localdata="year"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="月份:" style=" width: 45%; top: -60px;left: 55%; position: relative; z-index: 1;" name="month">
				<uni-data-select style="  margin-left: -25px; " v-model="baseFormData.month"
					placeholder="请选择月份" :localdata="month"></uni-data-select>
			</uni-forms-item>
			<view>
				<button size="mini" type="primary" style="top: -70px;" @click="submit">查询报表</button>
			</view>

		</uni-forms>


	<view  class="uni-container" style="margin-top: -70px;">
			<uni-table ref="table" :loading="loading"   emptyText="">
			
				<uni-tr>
					<uni-th width="60" align="center">周一</uni-th>
					<uni-th width="60" align="center">周二</uni-th>
					<uni-th width="60" align="center">周三</uni-th>
					<uni-th width="60" align="center">周四</uni-th>
					<uni-th width="60" align="center">周五</uni-th>
					<uni-th width="60" align="center">周六</uni-th>
					<uni-th width="60" align="center">周日</uni-th>
					<uni-th width="60" align="center">合计</uni-th>
				</uni-tr>
				
				
				<!-- 第一行 -->
				<uni-tr>
					<uni-th align="center"  class="th-time"   v-for="(item, index) in oneData" :key="index">{{item}}</uni-th>
				</uni-tr>
				<uni-tr>
					<uni-th class="th-netAmount"   align="center" v-for="(item, index) in oneNetAmount" :key="index">{{item}}</uni-th>
				</uni-tr>
					
				<!-- 第二行 -->
				<uni-tr>
					<uni-th  align="center"   class="th-time"   v-for="(item, index) in twoData" :key="index">{{item}}</uni-th>
				</uni-tr>
				<uni-tr>
					<uni-th class="th-netAmount"  align="center"  v-for="(item, index) in twoNetAmount" :key="index">{{item}}</uni-th>
				</uni-tr>
				
				<!-- 第三行 -->
				<uni-tr  >
					<uni-th width="20"  class="th-time"  align="center"  v-for="(item, index)  in threeData" :key="index">{{item}}</uni-th>
				</uni-tr>
				<uni-tr  >
					<uni-th class="th-netAmount"  align="center" v-for="(item, index) in threeNetAmount" :key="index">{{item}}</uni-th>
				</uni-tr>
				
				<!-- 第四行 -->
				<uni-tr  >
					<uni-th  align="center"  class="th-time"   v-for="(item, index) in fourData" :key="index">{{item}}</uni-th>
				</uni-tr>
				<uni-tr  >
					<uni-th class="th-netAmount" align="center"   v-for="(item, index) in fourNetAmount" :key="index">{{item}}</uni-th>
				</uni-tr>
				
				<!-- 第五行 -->
				<uni-tr  >
					<uni-th   align="center"   class="th-time"  v-for="(item, index) in fiveData" :key="index">{{item}}</uni-th>
				</uni-tr>
				<uni-tr  >
					<uni-th class="th-netAmount" align="center" style="border: none;"  v-for="(item, index) in fiveNetAmount" :key="index">{{item}}</text></uni-th>
				</uni-tr>
				
				
				<!-- 第六行 -->
				<uni-tr  >
					<uni-th align="center"  class="th-time"  v-for="(item, index) in sixData" :key="index">{{item}}</uni-th>
				</uni-tr>
				<uni-tr  >
					<uni-th align="center" class="th-netAmount"   v-for="(item, index) in sixNetAmount" :key="index">{{item}}</uni-th>
				</uni-tr>
			</uni-table>
			<text v-show="isShow" style="font-size: 15px; font-weight: bold;">当月净销售合计:{{netAmount}}</text><br>
		</view>  

	</view>
</template>

<script>
	import {baseUrl} from 'libs/util/global'
	import getdateTime from '@/common/getdateTime.js'
	export default {
		data() {
			return {
				netAmount: 0,
				cash: 0,
				isShow: false,
				candidates: [],
				chain: '',
				// 表单数据
				baseFormData: {
					chainStore: '',
					year: '',
					month: ''
				},
				store: [], // 连锁店下拉框
				year: [
					// { value: 2023, text: "2023年" },
					// { value: 2022, text: "2022年" },
					// { value: 2021, text: "2021年" },
					// { value: 2020, text: "2020年" },
					// { value: 2019, text: "2019年" },
					// { value: 2018, text: "2018年" },
					 
				], // 年份下拉框
				month:[
					{ value: 1, text: "1月份" },
					{ value: 2, text: "2月份" },
					{ value: 3, text: "3月份" },
					{ value: 4, text: "4月份" },
					{ value: 5, text: "5月份" },
					{ value: 6, text: "6月份" },
					{ value: 7, text: "7月份" },
					{ value: 8, text: "8月份" },
					{ value: 9, text: "9月份" },
					{ value: 10, text: "10月份" },
					{ value: 11, text: "11月份" },
					{ value: 12, text: "12月份" },
				],// 月份
				oneData: [], // 日期数组
				twoData: [],
				threeData: [],
				fourData: [],
				fiveData: [],
				sixData: [],
				oneNetAmount: [], // 时间对应净售量
				twoNetAmount: [],
				threeNetAmount: [],
				fourNetAmount: [],
				fiveNetAmount: [],
				sixNetAmount: [],
				chainId: '',				
				tableData: {},
				userId: '',
				isdministrators: false,
				// 表单校验
				rules: {
					// chainStore: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请选择连锁店',
					// 		ValidityState: 'submit'
					// 	}, ]
					// },
					year: {
						rules: [{
							required: true,
							errorMessage: '请选择年份',
							ValidityState: 'submit'
						}, ]
					},
					month: {
						rules: [{
							required: true,
							errorMessage: '请选择月份',
							ValidityState: 'submit'
						}, ]
					},
				},
				pageSize: 10,
				loginUserId: null,
				loginUserType: null,
				authority: null,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				userType: ''
			}
		},
		onLoad(option) {
			uni.getStorage({
				key: 'userId',
				success:(res)=> {
					// console.log(res.data + "登录用户id:"+res.data)
					this.loginUserId = res.data
				}
			});
			uni.getStorage({
				key: 'isChain',
				success:(res) =>{
					// console.log(res.data + "登录用户类型:"+res.data)
					this.loginUserType = res.data
				}
			});
			uni.getStorage({
				key: 'authority',
				success:(res) =>{
					// console.log(res.data + "登录用户权限:"+res.data)
					this.authority  = res.data
				}
			});
			// 获取当天时间
			var timeStr = getdateTime.dateTimeStr('y-m-d')
			this.baseFormData.startTime = timeStr
			this.baseFormData.endTime = timeStr

		},
		mounted() {
			this.getStorage()
			this.getYear()	
		},
		methods: {
			clearInput(){
				this.chain = ''
				this.baseFormData.chainStore = null
			},
			getHandle(chain){
				console.log("查看chain:"+chain)				
				if(chain == ""){
					this.baseFormData.chainStore = null
				}else{
					console.log("进入判断")
					for (var i = 0; i < this.store.length; i++) {
						if(this.store[i].text === chain){
							console.log(this.store[i].value)
							this.baseFormData.chainStore = this.store[i].value
						}
					}
				}
			},
			
			getYear(){
				var date = new Date();
				
				let year = date.getFullYear();
				for (var i = year; i >= 2018; i--) {
					let yearPo = {
						value: i,
						text: i + "年"
					}
					this.year.push(yearPo)
				}				
				// console.log("年份"+yearPo)
			},


			// 获取连锁店下拉框
			getStorage() {
				// 连锁店自营者 自己所拥有的店铺
				let url = baseUrl+'/chain/store/' +this.loginUserId + "/" + this.loginUserType
				uni.request({
					url: url,
					header: {'content-type': 'application/x-www-form-urlencoded'},
					method: 'GET',
					data: {},
					success: (res) => {
						// if (res.data.data.length > 1) {
							// 拿到连锁店下拉框信息							
							this.store = res.data.data		
							for (var i = 0; i < this.store.length; i++) {
								this.candidates.push(this.store[i].text) 
							}		
					}
				})
			},
					
			maskClick(e) {
				// console.log('maskClick事件 单据日期下拉框:', e);
				},
					//提交表单数据
			submit() {		
				this.isShow = true
				this.$refs.form.validate().then(res => {
						console.log(this.baseFormData.chainStore)
						console.log(this.baseFormData.year)
						console.log(this.baseFormData.month)
						// 判断连锁店名称合法性
						if(this.candidates.indexOf(this.chain,0) >= 0 || this.chain == ''){
							console.log("存在")
							uni.request({
								url: baseUrl+'/chain/month',
								header: {
									'content-type': 'application/json'
								},
								method: 'POST',
								data: {
									userId: null,
									userType: null,
									chainStore: null,
									year: this.baseFormData.year,
									month: this.baseFormData.month
								},
								success: (res) => {
									console.log(res)
									// 时间列表
									// console.log(res.data.data[0])
									this.oneData = res.data.data[0]
									this.twoData = res.data.data[1]
									this.threeData = res.data.data[2]
									this.fourData = res.data.data[3]
									this.fiveData = res.data.data[4]
									this.sixData = res.data.data[5]				
								}
							})
							uni.request({
								url: baseUrl+'/chain/orderSaler/week',
								header: {
									'content-type': 'application/json'
								},
								method: 'POST',
								data: {
									userId: this.loginUserId,
									userType: this.loginUserType,
									chainStore: this.baseFormData.chainStore,
									year: this.baseFormData.year,
									month: this.baseFormData.month
								},
								success: (res) => {
									console.log(res)
									// 净售额列表
									this.oneNetAmount = res.data.data.netAmount[0]
									this.twoNetAmount = res.data.data.netAmount[1]
									this.threeNetAmount = res.data.data.netAmount[2]
									this.fourNetAmount = res.data.data.netAmount[3]
									this.fiveNetAmount = res.data.data.netAmount[4]	
									this.sixNetAmount = res.data.data.netAmount[5]
									console.log(this.oneNetAmount[7])
									this.netAmount = this.oneNetAmount[7]
									 + this.twoNetAmount[7] 
									 + this.threeNetAmount[7]
									 + this.fourNetAmount[7]
									 + this.fiveNetAmount[7]
									 + this.sixNetAmount[7]
									 
									 // this.cash = this.oneNetAmount[7].cash
									 // + this.twoNetAmount[7].cash 
									 // + this.threeNetAmount[7].cash
									 // + this.fourNetAmount[7].cash
									 // + this.fiveNetAmount[7].cash
									 // + this.sixNetAmount[7].cash
								}
							})	
						}else{
						
							console.log("不存在")
							uni.showToast({
							title: '请输入正确的连锁店名称!',
							icon: 'none',
							duration: 1500
								});
							// 净售额列表	
							this.oneNetAmount = null
							this.twoNetAmount = null
							this.threeNetAmount = null
							this.fourNetAmount = null
							this.fiveNetAmount = null
							this.sixNetAmount = null
							this.oneData = null
							this.twoData = null
							this.threeData = null
							this.fourData = null
							this.fiveData = null
							this.sixData = null
							
							
								
						}	
						
						
						
					}).catch(err => {
					
					})
	
				
			},
			// 左上角返回按钮
			back() {
				uni.switchTab({
					url: '/pages/work/work'
				})
			}		
				}
				
			}
</script>

<style>
	.th-time{
		border: none;
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 10px;
	}
	.th-netAmount{
		border: none;
		padding-top: 2px;
		padding-bottom: 2px;
		height: 30px;
		color: crimson;	
		font-size: 11px;
		background-color: lightblue;
	}
	.th-cash{
		border: none;
		padding-top: 2px;
		padding-bottom: 2px;
		height: 20px;
		color: black;	
		font-size: 11px;
		background-color: lightblue;
	}
</style>